Text Elements II

Headings

Headings in HTML are comparable to headings in other media types. In journals, for instance, big headings are typically used to catch the attention of a reader. Other times, headings are used to define material, such as a film's title or an instructional article.

Headings are the primary way to outline the content of your webpage. They define the outline of your web page as both humans and search engines see it, which makes selecting relevant headings essential for a high-quality web page.

There are six distinct headings or heading components in HTML. Headings can be used for a multitude of reasons, such as titling segments, journals, or other types of content.

One way to think about headings on a web page is like headings in a book..

The <h1>, like the book title, introduces the topic that the web page is all about.

The <h2>, like book chapters, describe the main topics covered on the web page

Smaller headers like the <h3> to <h6> serve as other sub-headings that can be used within each section, just like a book chapter can be as a book chapter may be split up by multiple sub-topics.

Headings are ordered from the biggest to the smallest size. There are 6 levels of headings available, ranging from <h1> to <h6>, 1 being the most important one.

H1 is used for the primary headings. For subheadings, all other lower headings are used.

Here's an example of headers:

<h1>Observable Universe</h1>
<h2>Milky Way Galaxy</h2>
<h3>Earth</h3>
<h4>USA</h4>
<h5>Norfolk, VA</h5>
<h6>Main Street</h6>

Which results in:

Observable Universe

Milky Way Galaxy

Earth

USA

Norfolk, VA

Main Street

Accessibility with Headers

For people who are blind or visually impaired, screen reading software is used to parse through text on a web page.
A common technique these folks will use to navigate the page is to jump from heading to heading to determine the overall content of the page more easily.
That's why it's best practice to not skip one or more heading levels. If you did skip headings and went from <h1> to <h3>, you may cause confusion since the user has to deal with a missing heading.
Don't bum out any of your users - structure your headings properly! 👍🏽

Paragraphs

Paragraphs <p> are the most used HTML element, as they act as the default block-level element and are quick to write.

Below is the HTML code, as well as the “paragraphs” of text - note that there is nothing particularly special with the formatting of these.

<p>
  The sweet-faced and loving Labrador Retriever is actually one of the most
  popular dog breeds.
</p>
<p>
  Labs are extremely friendly with an easygoing and high-spirited personality
  which is great for bonding with the whole family.
</p>

The sweet-faced and loving Labrador Retriever is actually one of the most popular dog breeds.

Labs are extremely friendly with an easygoing and high-spirited personality which is great for bonding with the whole family.

Spans

The HTML <span> element is like a generic wrapper that is used to group text, mostly for styling purposes. Consider the following code:

<style>
p {
  color: black;
}
.red {
  color: red;
}
</style>
<p>
  This sentence needs some <span class=”red”>visual emphasis</span> to really bring home the point.
</p>

And its result:

This sentence needs some visual emphasis to really bring home the point.

In this code, the words visual emphasis have been put inside the span with the class red, so that those individual words can be styled separately from the rest of the p element. In this instance, the span words would be red, while the rest of the words would be black.

Blockquotes

Blockquotes are used to identify a citation.

<blockquote cite="https://www.wikiwand.com/en/Scooby-Doo_(character)">
  <p>Ruh-roh--RAGGY!!!</p>
  <footer>—Scooby Doo, <cite>Mystery Incorporated</cite></footer>
</blockquote>

Ruh-roh--RAGGY!!!

Line Breaks

The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser.

If you are interested in modifying the spacing in the browser, you can use HTML’s line break element.

<p>
  I jump in delight<br />
  I run off in frenzy<br />
  For now I have just realized<br />
  that the fun has arrived<br />
  the fun has begun<br />
  jumping all on one piece<br />
  almost feeling like I can't breathe<br />
  blood rushing through me<br />
  a second, a beat<br />
  I feel the air on my face<br />
  My fur rising up<br />
  Free as free as it can be<br />
  That's what you feel<br />
  When your owner has arrived<br />
</p>

I jump in delight
I run off in frenzy
For now I have just realized
that the fun has arrived
the fun has begun
jumping all on one piece
almost feeling like I can't breathe
blood rushing through me
a second, a beat
I feel the air on my face
My fur rising up
Free as free as it can be
That's what you feel
When your owner has arrived